<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/swiper-4.3.5.min.css">
    <link rel="stylesheet" href="../css/element.css">
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../css/person_center/person_center.css">
    <title>会员中心-优惠券</title>
</head>

<body>
    <div id="app" v-cloak>
        <headers></headers>
        <!-- search -->
        <div class="search wrap">
            <logo></logo>
            <div class="header_tit fl"></div>
            <searchs></searchs>

            <car_box></car_box>

        </div>
        <div class="wrap person_center">
            <!-- nav -->
            <div class="nav_box fl">
                <div id="subapp" v-cloak>
                    <div class="person_nav fl">
                        <ul>
                            <li @click='person_order'>首页</li>
                            <li @click='person_center'>我的订单</li>
                            <li @click='person_address'>收货地址</li>
                            <li @click='person_exchange_page'>积分换货</li>
                            <li @click='person_intergal'>积分订单</li>
                            <li @click='person_collection'>我的收藏</li>
                            <li @click='person_foot'>浏览足迹</li>
                            <li class="active">优惠券</li>
                            <li @click='person_info'>个人设置</li>
                            <li @click='person_message'>消息中心</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="right_box fl" v-show='isActive'>
                <div class="ticket_nav">
                    <ul>
                        <li @click='can_use' class="cursor" :class="{ active: isActive}">可用优惠券({{ticket_num}})</li>
                        <li @click='no_use' class="cursor" :class="{ active: !isActive}">已失效({{unticket_num}})</li>
                    </ul>
                </div>

                <div class="ticket_list">
                    <div class="ticket_item fl" v-for="(item,index) in ticket_list" >
                        <div class="expired">
                            <!-- <img src="../images/iocn_jingguoqi.png" alt=""> -->
                        </div>
                        <div class="ticket_del" @click='deleteCouponsByIdUserUser(item.id)'>
                            <img src="../images/icon_shanchu.png" class="cursor" alt="">
                        </div>
                        <div class="ticket_detail">
                            <div class="ticket_money">
                                <span>¥</span> {{item.coupons.couponMoney}}
                            </div>
                            <p class="can_ueser">满{{item.coupons.spendMoney}}可用</p>
                            <p class="user_data">{{item.coupons.validStartTime = item.coupons.validStartTime.substring(0, 10)}}－{{item.coupons.validEndTime = item.coupons.validEndTime.substring(0, 10)}}</p>
                        </div>
                        <div class="user_limit">
                            <p class="limit_detail">使用限制：<span>{{item.shopName}}</span></p>
                            <!-- <div class="ticket_btn">
                                立即使用
                            </div> -->
                        </div>

                    </div>
                    <div class="page_wrap">
                        <el-pagination background @current-change="handleCurrentChange"  layout="prev, pager, next" :total="total" class="page_list">
                        </el-pagination>
                    </div>
                </div>
            </div>

            <div class="right_box fl" v-show='!isActive'>
                <div class="ticket_nav">
                    <ul>
                        <li @click='can_use' class="cursor" :class="{ active: isActive}">可用优惠券({{ticket_num}})</li>
                        <li @click='no_use' class="cursor" :class="{ active: !isActive}">已失效({{unticket_num}})</li>
                    </ul>
                </div>

                <div class="ticket_list">
                    <div class="ticket_item fl" v-for="(item,index) in unticket_list" >
                        <div class="ticket_del" @click='deleteCouponsByIdUserUser(item.id)'>
                            <img src="../images/icon_shanchu.png" class="cursor" alt="">
                        </div>
                        <div class="ticket_detail_no">
                            <div class="ticket_money">
                                <span>¥</span> {{item.coupons.couponMoney}}
                            </div>
                            <p class="can_ueser">满{{item.coupons.spendMoney}}可用</p>
                            <p class="user_data">{{item.coupons.validStartTime = item.coupons.validStartTime.substring(0, 10)}}－{{item.coupons.validEndTime = item.coupons.validEndTime.substring(0, 10)}}</p>
                        </div>
                        <div class="user_limit">
                            <p class="limit_detail">使用限制：<span>{{item.shopName}}</span></p>
                            <div class="shixiao">
                                <img src="../images/icon_shixiao.png" alt="">
                            </div>
                        </div>

                    </div>
                    <div class="page_wrap">
                        <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="total" class="page_list">
                        </el-pagination>
                    </div>
                </div>
                
            </div>
           

        </div>
       <div class="wrap clear_both">             <productfooter></productfooter>         </div>
    </div>
     
    <script src="../js/axios.js"></script>         <script src="../js/qs.js"></script>
    <script src="../js/swiper-4.3.5.min.js"></script>
    <script src="../js/browser.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/element.js"></script>
    <script src="../js/main.js"></script>
    <script type="text/babel">
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    car_active:false,
                    groups:3,
                    isActive:true,
                    ticket_list:'',
                    ticket_num:'',
                    unticket_num:'',
                    un_ticket_list:'',
                    unticket_list:'',
                    total:0
                };
            },
            created() {
                
            },
            mounted() {
                this.listUserUser()
                this.unlistUserUser()
            },
            methods: {
                 // 分页
                handleCurrentChange(page) {
                    console.log(page)
                }, //改变条数触发
                handleIndexChange(index) {
                    console.log(index)
                },
                // 删除优惠券
                deleteCouponsByIdUserUser(id){
                    axios({
                        method:"POST",
                        url:base_url + "/coupons/deleteCouponsByIdUserUser",
                        data:Qs.stringify({
                            id:id
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        app.listUserUser()
                        app.unlistUserUser()
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                // 可用优惠券
                listUserUser(){
                    axios({
                        method:"POST",
                        url:base_url + "/coupons/listUserUser",
                        data:Qs.stringify({
                            validType:1,
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        app.ticket_list = res.data.data.list.list
                        app.total = res.data.data.list.total
                        console.log(app.ticket_list)
                        app.ticket_num = res.data.data.list.total
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                // 不可用优惠券
                unlistUserUser(){
                    axios({
                        method:"POST",
                        url:base_url + "/coupons/listUserUser",
                        data:Qs.stringify({
                            validType:2
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        app.unticket_list = res.data.data.list.list
                        app.total = res.data.data.list.total
                        app.unticket_num = res.data.data.list.total
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                // 显示购物车               
                go_shop_car(){                     
                    window.location.href='../product/shop_car.html'  
                },
                car_box(){
                    this.car_active = !this.car_active
                },
                can_use() {
                    this.isActive = true
                },
                no_use() {
                    this.isActive = false
                },
                person_order(){
                    window.location.href='person_order.html'
                },
                person_address(){
                    window.location.href='person_address.html'
                },
                person_exchange_page(){
                    window.location.href='person_exchange_page.html'
                },
                person_center(){
                    window.location.href='person_center.html?index='+0
                },
                person_intergal(){
                    window.location.href='person_integral_order.html'
                },
                person_collection(){
                    window.location.href='person_collection.html'
                },
                person_info(){
                    window.location.href='person_info.html'
                },
                person_message(){
                    window.location.href='person_message.html'
                },
                person_foot(){
                    window.location.href='person_footprint.html'
                }
            }
        })
        
    </script>
</body>

</html>